<template>
    <div>
        <el-button type="primary" size="mini" round @click="dialogVisible = true">导入excel文件</el-button>
        <el-dialog
                title="导入销售区域excel文件"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                width="90%">

            <div>
                <el-row>
                    <el-button type="primary" @click="exportExcel" round>下载excel模板</el-button>

                    <el-upload
                            :show-file-list="false"
                            action="#"
                            :auto-upload="false"
                            style="display: inline-block"
                            accept=".xls,.xlsx"
                            :on-change="handleChange">
                        <el-button type="primary" round>选择excel文件</el-button>
                    </el-upload>
                </el-row>

                <div style="margin-top: 20px">
                    <el-table ref="excelTable" :data="rowList" stripe style="width: 100%" max-height="800"
                              @selection-change="selectionChange">
                        <el-table-column type="selection" fixed width="50">
                        </el-table-column>
                        <el-table-column type="index" show-overflow-tooltip label="序号" fixed width="50">
                        </el-table-column>
                        <el-table-column prop="areaName" label="区域名称" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.areaName" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="parentName" label="上级区域" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.parentName" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="areaLevel" label="区域等级" min-width="160">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.areaLevel" placeholder="请选择">
                                    <el-option
                                            v-for="item in areaLevelDict"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序号" min-width="160">
                            <template slot-scope="scope">
                                <el-input-number
                                        v-model="scope.row.sort"
                                        :min="0" :max="10000"
                                        placeholder="请输入内容"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remarks" label="备注信息" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remarks" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column fixed="right" label="操作" width="60">
                            <template slot-scope="scope">
                                <el-button @click="deleteRow(scope.row, scope.$index)" type="text"
                                           size="small">移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <span slot="footer">
                <el-button type="primary"
                           :loading="btnFlag"
                           round
                           @click="submitInfo">确认导入
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {fetchDict, fetchDictMap} from '@/util/util';
    import {areaImport as infoImport} from '@/api/crm/import_info';

    export default {
        name: 'salesAreaImport',
        data: function () {
            return {
                dialogVisible: false,
                closeFlag: false,
                btnFlag: false,
                // 行数据
                rowList: [{}],
                selectRowList: [],
                // 字典
                areaLevelDict: []
            }
        },
        created() {
            // 字典初始化
            fetchDict('scm_level_type', this.areaLevelDict);
        },
        computed: {
            areaLevelMap: function () {
                if (this.areaLevelDict.length) {
                    return fetchDictMap(this.areaLevelDict);
                }
                return new Map();
            }
        },
        methods: {
            // 下载excel模板
            exportExcel() {
                window.open("/file/crm/销售区域导入模板.xlsx");
            },
            handleClose(done) {
                if (this.closeFlag) {
                    this.$confirm('有未提交修改, 确认关闭?')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {
                        });
                } else {
                    done();
                }
            },
            //删除
            deleteRow(row, index) {
                this.rowList.splice(index, 1);
                if (this.rowList.length === 0) {
                    this.rowList.push({});
                    this.closeFlag = false;
                }
            },
            // 多选
            selectionChange(list) {
                this.selectRowList = list;
            },
            // 全选
            selectAll() {
                this.$refs.excelTable.toggleAllSelection();
            },
            // 处理excel文件
            handleChange(file) {
                this.closeFlag = true;
                this.selectRowList = [];
                let name = file.name;
                let type = name.substring(name.lastIndexOf('.')).toLowerCase();
                if (!(type === '.xls' || type === '.xlsx')) {
                    this.$notify({
                        title: '提示',
                        message: '请选择Excel文件',
                    });
                    return;
                }
                // 表头 属性转换
                this.$export.xlsx(file.raw).then(data => {
                    this.rowList = data.results.map((item) => {
                        return {
                            areaName: item['区域名称'],
                            parentName: item['上级区域'],
                            areaLevel: this.areaLevelMap.get(item['区域等级']),
                            sort: item['排序号'],
                            remarks: item['备注']
                        };
                    });
                    // 全选
                    this.selectAll();
                })
            },
            // 提交导入信息
            submitInfo() {
                if (this.selectRowList.length) {
                    this.btnFlag = true;
                    infoImport({
                        'areaList': this.selectRowList
                    }).then(res => {
                        this.$notify({
                            title: '导入结果提示',
                            dangerouslyUseHTMLString: true,
                            message: res.data.data.replace(/[|]/g, '<br/>'),
                            duration: 50000
                        });
                        this.closeFlag = false;
                    }).catch(err => {
                        this.$notify({
                            title: '错误提示',
                            message: err,
                            duration: 50000
                        });
                    }).finally(() => {
                        this.btnFlag = false;
                    });
                } else {
                    this.$notify({
                        title: '导入提示',
                        message: '请选择需导入的明细信息',
                    });
                }
            },
        }
    }
</script>

<style scoped lang="scss">

</style>
